<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"  
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:f="http://java.sun.com/jsf/core" 
      xmlns:h="http://java.sun.com/jsf/html">
   <h:head>
      <h:outputStylesheet library="css" name="styles.css"/>
      <title>#{msgs.title}</title>
   </h:head>
   <h:body>
      <h:form>
         <h1>#{msgs.enterPayment}</h1>
         <h:panelGrid columns="3">
            #{msgs.amount}
            <h:inputText id="amount" label="#{msgs.amount}"
                         value="#{payment.amount}" required="true">
               <f:convertNumber minFractionDigits="2"/>
               <f:validateDoubleRange minimum="10" maximum="10000"/>
            </h:inputText>
            <h:message for="amount" styleClass="errorMessage"/>

            #{msgs.creditCard}
            <h:inputText id="card" label="#{msgs.creditCard}"
                         value="#{payment.card}" required="true"
                         requiredMessage="#{msgs.cardRequired}">
               <f:validateLength minimum="13"/>
            </h:inputText>
            <h:message for="card" styleClass="errorMessage"/>

            #{msgs.expirationDate}
            <h:inputText id="date" label="#{msgs.expirationDate}"
                         value="#{payment.date}" required="true">
               <f:convertDateTime pattern="MM/yyyy"/>
            </h:inputText>
            <h:message for="date" styleClass="errorMessage"/>
         </h:panelGrid>
         <h:commandButton value="#{msgs.process}" action="result"/>
         <h:commandButton value="#{msgs.cancel}" action="canceled" 
                          immediate="true"/>
      </h:form>
   </h:body>
</html>
